<template>
    <dl class="detail-type">
        <dt>
            <!-- @click="isShow = !isShow" -->
            <span class="tit">商品信息</span>
            <el-button v-if="edit" type="primary" size="mini" @click.stop="choiceCus()" :disabled="loading">选择商品
            </el-button>
        </dt>
        <el-collapse-transition>
            <dd v-show="isShow" v-loading="loading">
                <!-- <el-form :model="queryParams" ref="queryForm" :inline="true" class="search-con">
                        <el-form-item prop="key" style="margin-right: 25px">
                            <el-input v-model="queryParams.key" placeholder="请输入商品信息" clearable size="small"
                                @input="handleQuery" />
                        </el-form-item>
                    </el-form> -->
                <el-table border v-loading="loading" :data="selectList" ref="goodsList" v-tableHeight
                    :height="selectList && selectList.length > 0 ? '452px' : '120px'">
                    <el-table-column label="商品名称" align="center" prop="name" />
                    <el-table-column label="商品编号" align="center" prop="code" width="180" />
                    <el-table-column label="规格" align="center" prop="goods_spec">
                        <template slot-scope="scope">
                            <span>{{ scope.row.goods_spec.split(";;").toString().replace(/::/g, ':') }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="商品库存" align="center" prop="stock_total" />
                    <el-table-column label="销售价格" align="center" prop="price_selling" />
                    <el-table-column label="市场价格" align="center" prop="price_market" />
                    <el-table-column label="购买数量">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.stock_sales" placeholder=1 :placeholder-style="{ color: '#000000' }"
                                @keyup.native="scope.row.stock_sales = onInput(scope.row.stock_sales)">
                            </el-input>
                            <!-- <span v-else>{{ scope.row.stock_total }}</span> -->
                        </template>
                    </el-table-column>
                    <!-- <el-table-column label="优惠金额" align="center" prop="area" />
                    <el-table-column label="税金" align="center" prop="detailed" /> -->
                    <!-- <el-table-column label="合计金额" align="center" prop="mobile" />
                    <el-table-column label="操作" align="center" prop="telephone" /> -->
                </el-table>
                <el-dialog title="选择商品" visible v-if="detailShow == 'choice'" @close="close()" width="1000px" append-to-body
                    :close-on-click-modal="false">
                    <!-- :modal-append-to-body="false" -->
                    <el-form :model="queryParams" ref="queryForm" :inline="true" class="search-con">
                        <el-form-item prop="key" style="margin-right: 25px">
                            <el-input v-model="queryParams.key" placeholder="请输入商品名称" clearable size="small"
                                @input="handleQuery" />
                        </el-form-item>
                    </el-form>
                    <!-- <el-button type="primary" icon="el-icon-edit" size="mini" @click="handleBulk"
                        v-hasPermi="['customer:manage:add']">
                        批量选中</el-button> -->
                    <el-table border v-loading="diaLoading" :data="tableList" ref="tableList" v-tableHeight
                        :height="tableList && tableList.length > 0 ? '452px' : '120px'"
                        @selection-change="handleSelectionChange" @row-click="toggleSelection">
                        <!-- @select-all="onSelectAll" @selection-change="selectItem" @row-click="onSelectOp" -->
                        <el-table-column type="selection" width="55" align="center" fixed="left" />
                        <el-table-column label="商品名称" align="center" prop="name" />
                        <el-table-column label="商品编号" align="center" prop="code" width="180" />
                        <el-table-column label="商品图片" align="center" prop="cover">
                            <template slot-scope="scope">
                                <div v-if="scope.row.cover" class="img-list">
                                    <el-image style="width: auto; height: 45px;" :src="scope.row.cover"
                                        :preview-src-list="[scope.row.cover]">
                                    </el-image>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="规格" align="center" prop="goods_spec" width="180">
                            <template slot-scope="scope">
                                <span>{{ scope.row.goods_spec.split(";;").toString().replace(/::/g, ':') }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="销量" align="center" prop="number_virtual" />
                        <el-table-column label="商品库存" align="center" prop="stock_total" />
                        <el-table-column label="销售价格" align="center" prop="price_selling" />
                        <el-table-column label="市场价格" align="center" prop="price_market" />
                    </el-table>
                    <pagination v-show="pageCount > 0" :pageCount="pageCount" :page.sync="queryParams.page"
                        :limit.sync="queryParams.limit" @pagination="getList" />
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="close()">取 消</el-button>
                        <el-button type="primary" @click="submit" :disabled="diaLoading">确 定</el-button>
                    </span>
                </el-dialog>
            </dd>
        </el-collapse-transition>
    </dl>
</template>
<script>
import { getGoodsLists } from "@/api/purchaseOrder/purchase.js"
export default {
    name: '',
    props: {
        handleShow: {
            type: String, //add新增edit编辑
            default: ""
        },
        data: {
            type: Object,
            default: function () {
                return {}
            }
        },
        // suppId: {
        //     type: String,
        //     default: ""
        // }
    },
    components: {

    },
    data() {
        return {
            loading: false,
            isShow: true,
            diaLoading: false,
            detailShow: '',
            pageCount: 0,
            queryParams: {
                page: 1,
                limit: 10,
            },
            goodsList: [],
            tableList: [],
            selectData: {},
            size: 'mini',
            edit: this.handleShow == "detail" ? false : true,
            selectList: [],
            GoodList: [],
        }
    },
    watch: {
        'selectList.stock_sales'(val) {
            if (val) {
                // for (let i = 0; i < this.selectList.length; i++) {
                //     let goodsInfo =  this.selectList[i]
                //     this.GoodList.push({
                //         'goods_code':goodsInfo.code,
                //         'goods_sku':goodsInfo.goods_sku,
                //         'stock_sales':goodsInfo.stock_sales
                //     })
                // }
                console.log(this.GoodList, 888)
            }
        }
    },
    created() {
        // this.getList()
        // if (this.handleShow == "detail") {
        //     console.log(this.data, 111)
        //     this.form.settle_method = this.data.settle_method
        //     this.form.exch_rate = this.data.exch_rate
        // }
    },
    methods: {
        choiceCus() {
            this.getList()
            this.detailShow = 'choice'
        },
        getList() {
            this.diaLoading = true;
            getGoodsLists(this.queryParams).then(res => {
                this.tableList = res.data.lists;
                console.log(this.tableList, 456)
                this.pageCount = res.data.pageCount;
                this.diaLoading = false;
            });
        },
        toggleSelection(row) {
            this.$refs.tableList.toggleRowSelection(row);
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.selectData = selection;
            console.log(this.selectData, "cccc0")
        },
        // onSelectAll() {
        //     this.$refs.tableList.clearSelection();
        // },
        // selectItem(rows) {
        //     if (rows.length > 1) {
        //         const newRows = rows.filter((it, index) => {
        //             if (index == rows.length - 1) {
        //                 this.$refs.tableList.toggleRowSelection(it, true);
        //                 return true;
        //             } else {
        //                 this.$refs.tableList.toggleRowSelection(it, false);
        //                 return false;
        //             }
        //         });
        //         this.multipleSelection = newRows;
        //     } else {
        //         this.multipleSelection = rows;
        //     }
        //     // this.userId = this.multipleSelection.length? this.multipleSelection[0].guid: "";
        //     this.selectData = this.multipleSelection[0]
        // },
        // onSelectOp(row) {
        //     this.$refs.tableList.clearSelection();
        //     this.$refs.tableList.toggleRowSelection(row, true);
        //     this.multipleSelection = [];
        //     this.multipleSelection.push(row);
        // },
        close() {
            // this.queryParams = {
            //     page: 1,
            //     limit: 10,
            //     supp_id: this.suppId
            // }
            this.selectData = {}
            this.goodsList = []
            this.detailShow = ''
        },
        handleQuery() {
            this.queryParams.page = 1;
            this.getList();
        },
        submit() {
            console.log(this.selectData, "cccc1")
            // this.goodsList.push(this.selectData)
            this.selectList = this.selectData
            console.log(this.selectList, 6666)
            this.close()
        }
    },
}

</script>
<style scoped lang='scss'>
el-input_inner::placeholder {
    color: #000;
}
</style>